import React from "react";
import { useContext } from "react";
import { Appcontxt } from "../../App";
import "./index.css";

export default function Index(props) {
  const { id, name, done } = props.content;
  const { handleUpdata, handleDel } = useContext(Appcontxt);
  const delToDo = () => {
    if (!done) {
      alert("该任务还没有完成");
    } else if (window.confirm("确定删除吗")) {
      handleDel(id);
    }
  };
  return (
    <div>
      <li>
        <label>
          <input
            type="checkbox"
            checked={done}
            onChange={() => {
              handleUpdata(id);
            }}
          />
          <span>{name}</span>
        </label>
        <button onClick={delToDo} className="btn btn-danger">
          删除
        </button>
      </li>
    </div>
  );
}
